<template>
	<view class="commoditylist">
		<!-- <view class="status_bar">
			
		</view>
		<view class="top headline">
			<uni-icons type="arrowleft" size="24" class="left" color="#000" @click="commonality.back()" />
			{{titleName}}商品
			<image src="/static/img/find_2.png" class="right" @click="go_url('./find')" />
		</view> -->
		<uni-nav-bar left-icon="arrowleft" right-icon="search"  @clickLeft="back" @clickRight="go_url('./find')" :fixed="true" class="top" status-bar>
			<view  slot="default" class="titless">{{titleName}}商品</view>
		</uni-nav-bar>
		<view class="screen">
			<view :class="{ active: sort == 1 }" @click="go_screen(1)">销量</view>
			<view :class="{ active: sort == 2 }" @click="go_screen(2)">最新</view>
			<view :class="{ active: sort == 3 || sort == 4 }" @click="go_screen_price">
				价格
				<image src="/static/img/sort.png" class="price" :class="{ positive: screen_price }" />
			</view>
			<view class="arrange" @click="direction = !direction">
				<image src="/static/img/arrange1.png" />
			</view>
			<view class="filtrate" @click="changedraw">
				筛选
				<image src="/static/img/screen1.png" />
			</view>
		</view>
		<view class="list" :class="{ vertical: direction, level: !direction }">
			<view style="overflow: hidden;">
				<view class="shop" v-for="item in goodList" :key="item.value" @click="go_goodDetails(item.id)">
					<view class="img">
						<image :src="item.image" mode="aspectFill" />
					</view>
					<view class="msg">
						<view class="name">{{ item.goodsName }}</view>
						<view class="price">
							￥{{ item.marketPrice }}
							<image src="/static/img/car_1.png" class="right" v-if="!actId&&issee"/>
						</view>
					</view>
				</view>
			</view>
			<view class="pagination" v-if="goodList.length > 0">
				<view class="left" :class="{ forbid: paging.page == 1 }" @click="prev">
					<uni-icons type="arrowleft" size="20" color="#fff" class="icons" />
					上一页
				</view>
				<view class="center">{{ paging.page }}/{{ paging.total }}</view>
				<view class="right" :class="{ forbid: paging.page == paging.total }" @click="next">
					下一页
					<uni-icons type="arrowright" size="20" color="#fff" class="icons" />
				</view>
			</view>
		</view>
		<view v-show="goodList.length == 0" class="notavailable">
			<image src="../../../static/img/notavailable.png" mode="widthFix"></image>
			<view class="nottext">暂时没有数据</view>
		</view>
		<uni-drawer :visible="showdrawer" mode="right" class="draw">
			<view class="uni-title">筛选搜索</view>
			<view class="classify">
				<view class="title" @click="iscategoryshow = !iscategoryshow">
					<text>分类</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="iscategoryshow">
					<view class="li" :class="{ on: categorycur == index }" v-for="(item, index) in list.category" :key="index" @click="changecategory(item, index)">
						{{ item.catName }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @click="issceneshow = !issceneshow">
					<text>场景</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="issceneshow">
					<view class="li" :class="{ on: scenecur == index }" v-for="(item, index) in list.scene" :key="index" @tap="changescene(item, index)">
						{{ item.sceneName }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify price">
				<view class="title" @tap="ispriceshow = !ispriceshow">
					<text>价格</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul flex" v-if="ispriceshow">
					<input type="number" value="" class="li" placeholder="最低价" v-model="minPrice" @input="low" />
					<text class="xian"></text>
					<input type="number" value="" class="li" placeholder="最高价" v-model="maxPrice" @input="hight" />
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="iscolershow = !iscolershow">
					<text>颜色</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="iscolershow">
					<view class="li" :class="{ on: colercur == index }" v-for="(item, index) in list.coler" :key="index" @tap="changcoler(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="issizeshow = !issizeshow">
					<text>尺码</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="issizeshow">
					<view class="li" :class="{ on: sizecur == index }" v-for="(item, index) in list.size" :key="index" @tap="changesize(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="isshoulderwidthshow = !isshoulderwidthshow">
					<text>衣宽</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="isshoulderwidthshow">
					<view class="li" :class="{ on: shoulderwidthcur == index }" v-for="(item, index) in list.shoulderwidth" :key="index"
					 @tap="changeshoulderwidth(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="isbustshow = !isbustshow">
					<text>胸围</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="isbustshow">
					<view class="li" :class="{ on: bustcur == index }" v-for="(item, index) in list.bust" :key="index" @tap="changebust(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="iswaistshow = !iswaistshow">
					<text>腰围</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="iswaistshow">
					<view class="li" :class="{ on: waistcur == index }" v-for="(item, index) in list.waist" :key="index" @tap="changewaist(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="issleeveLengshow = !issleeveLengshow">
					<text>袖长</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="issleeveLengshow">
					<view class="li" :class="{ on: sleeveLengcur == index }" v-for="(item, index) in list.sleeveLeng" :key="index"
					 @tap="changesleeveLeng(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="button" @click="reset()">重置</view>
		</uni-drawer>
	</view>
</template>

<script>
	import {
		uniIcons,
		uniDrawer,
		uniNavBar
	} from '@dcloudio/uni-ui';
	import goodList from '../../../servers/commodity/list.js';
	import placeorder from '../../../servers/agent/placeorder/placeorder.js';
	export default {
		components: {
			uniIcons,
			uniDrawer,
			uniNavBar
		},
		data() {
			return {
				zone: '',
				partitionId:'',
				actId: '',
				sort: '1',
				goodList: [],
				titleName:'',
				screen: 0,
				screen_price: false,
				direction: false,

				paging: {
					page: 1,
					total: 100
				},

				list: '',
				actType:'',
				showdrawer: false,
				iscategoryshow: false,
				issceneshow: false,
				ispriceshow: false,
				iscolershow: false,
				issizeshow: false,
				isshoulderwidthshow: false,
				isbustshow: false,
				iswaistshow: false,
				issleeveLengshow: false,
				categorycur: null,
				scenecur: null,
				colercur: null,
				sizecur: null,
				shoulderwidthcur: null,
				bustcur: null,
				waistcur: null,
				sleeveLengcur: null,
				categoryid: '',
				sceneid: '',
				maxPrice: '',
				minPrice: '',
				color: '',
				size: '',
				// shoulderwidth: '',
				// bust: '',
				// waist: '',
				// sleeveLeng: '',
				orderlist: '',
				paramslist:[],
				paramvalueslist:[],
				issee:true
			};
		},
		mounted() {
			// this.zone = uni.getStorageSync('shopcommoditylist') || this.$route.query.shopcommoditylist;
			// this.actId = uni.getStorageSync('actId') || this.$route.query.actId;
			// this.getDate();
			// this.drawer();
			if(uni.getStorageSync('mr')=='a'){
				this.issee=false
			}else{
				this.issee=true
			}
		},
		

		onLoad(option) {
		/* 	if (option.actId) {
				this.actId = option.actId
			} */
			this.actId =this.commonality.route_get('actId', this.$route);
			this.partitionId=this.commonality.route_get('partitionId', this.$route);
			this.actType=this.commonality.route_get('actType', this.$route);
			if(this.partitionId==-1){
							this.partitionId='';
						}
			this.titleName=this.commonality.route_get('titleName', this.$route);	
					console.log(this.titleName);
					console.log(this.actId)
			this.getDate();
			this.drawer();
		},
		methods: {
			changedraw(){
				this.showdrawer = !this.showdrawer
				this.iscategoryshow= false
				this.issceneshow= false
				this.ispriceshow= false
				this.iscolershow= false
				this.issizeshow=false
				this.isshoulderwidthshow= false
				this.isbustshow= false
				this.iswaistshow= false
				this.issleeveLengshow= false
				this.shoulderwidthcur=null
				this.categorycur= null
				this.scenecur=null
				this.colercur= null
				this.sizecur=null			
				this.bustcur= null
				this.waistcur= null
				this.sleeveLengcur= null
				this.maxPrice= ''
				this.minPrice= ''
			},
			// 获取元素下标
			contains(arrays, obj) {
			    var i = arrays.length;
			    while (i--) {
			        if (arrays[i] === obj) {
			            return i;
			        }
			    }
			    return false;
			},
			reset(){
				this.iscategoryshow= false
				this.issceneshow= false
				this.ispriceshow= false
				this.iscolershow= false
				this.issizeshow=false
				this.isshoulderwidthshow= false
				this.isbustshow= false
				this.iswaistshow= false
				this.issleeveLengshow= false
				this.shoulderwidthcur=null
				this.categorycur= null
				this.scenecur=null
				this.colercur= null
				this.sizecur=null			
				this.bustcur= null
				this.waistcur= null
				this.sleeveLengcur= null
				this.maxPrice= ''
				this.minPrice= ''
			},
			// 获取参数
			getparams(name,value){
				if(this.paramslist.indexOf(name)==-1){
					this.paramslist.push(name)
					this.paramvalueslist.push(value)
				}else{
					this.paramvalueslist.splice(this.contains(this.paramslist,name),1)
					this.paramvalueslist.push(value)
					this.paramslist.splice(this.contains(this.paramslist,name),1)
					this.paramslist.push(name)
				}
			},
			// 抽屉列表
			drawer() {
				uni.showLoading({
					title: '数据加载中'
				});
				placeorder
					.queryCriteria()
					.then(res => {
						// console.log(res.data)
						if (res.code == 200) {
							this.list = res.data;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						uni.hideLoading();
					})
					.catch(err => {

						console.log(new Error('请检查网络后重试'));
					});
			},
			// 最高价
			hight(event) {
				if(this.scenecur||this.colercur||this.sizecur||this.bustcur||this.shoulderwidthcur||this.sleeveLengcur||this.waistcur){
				return			
						}
				this.maxPrice = event.detail.value;
				if (this.minPrice&&this.maxPrice - this.minPrice < 0) {

					uni.showToast({
						title: '不能小于最低价格哦~',
						icon: 'none',
					})
					return;
				}
				this.getDate();
			},
			low(event) {
				if(this.scenecur||this.colercur||this.sizecur||this.bustcur||this.shoulderwidthcur||this.sleeveLengcur||this.waistcur){
				return			
						}
				this.minPrice = event.detail.value;

				this.getDate();
			},
			// 胸围
			changebust(item, index) {
				if(this.categorycur||this.maxPrice||this.minPrice|| this.scenecur||this.colercur||this.sizecur){
				return			
						}
				this.bustcur = index;
				// this.bust = item.dictValueDesp;
				this.getparams('胸围',item.dictValueDesp)
				this.getDate();
				// if(this.paramslist.indexOf('胸围')==-1){
				// 	this.paramslist.push('胸围')
				// 	this.paramvalueslist.push(item.dictValueDesp)
				// }else{
				// 	this.paramvalueslist.splice(this.contains(this.paramslist,'胸围'),1)
				// 	this.paramvalueslist.push(item.dictValueDesp)
				// 	this.paramslist.splice(this.contains(this.paramslist,'胸围'),1)
				// 	this.paramslist.push('胸围')
				// }
				
			},
			// 腰围
			changewaist(item, index) {
				if(this.categorycur||this.maxPrice||this.minPrice|| this.scenecur||this.colercur||this.sizecur){
				return			
						}
				this.waistcur = index;
				this.getparams('腰围',item.dictValueDesp)
				this.getDate();
			},
			// 袖长
			changesleeveLeng(item, index) {
				if(this.categorycur||this.maxPrice||this.minPrice|| this.scenecur||this.colercur||this.sizecur){
				return			
						}
				this.sleeveLengcur = index;
				this.getparams('袖长',item.dictValueDesp)
				this.getDate();
			},
			// 分类
			changecategory(item, index) {
				if(this.scenecur||this.colercur||this.sizecur||this.bustcur||this.shoulderwidthcur||this.sleeveLengcur||this.waistcur){
		return			
				}
				this.categorycur = index;
				this.categoryid = item.id;
				this.getDate();
				// console.log(this.$refs[`list.category${index}`][0].$el,item.id)
			},
			// 场景
			changescene(item, index) {
				if(this.categorycur||this.maxPrice||this.minPrice||this.colercur||this.sizecur||this.bustcur||this.shoulderwidthcur||this.sleeveLengcur||this.waistcur){
				return			
						}
				this.scenecur = index;
				this.sceneid = item.id;
				this.getDate();
			},
			changcoler(item, index) {
				if(this.categorycur||this.maxPrice||this.minPrice||this.scenecur|| this.bustcur||this.shoulderwidthcur||this.sleeveLengcur||this.waistcur){
				return			
						}
				this.colercur = index;
				this.color = item.dictValueDesp;

				this.getDate();
			},
			changesize(item, index) {
				if(this.categorycur||this.maxPrice||this.minPrice||this.scenecur|| this.bustcur||this.shoulderwidthcur||this.sleeveLengcur||this.waistcur){
				return			
						}
				this.sizecur = index;
				this.size = item.dictValueDesp;
				this.getDate();
			},
			// 衣宽
			changeshoulderwidth(item, index) {
				if(this.categorycur||this.maxPrice||this.minPrice|| this.scenecur||this.colercur||this.sizecur){
				return			
						}
				this.shoulderwidthcur = index;
				this.getparams('衣宽',item.dictValueDesp)
				 this.getDate();
			},
			getDate() {
				var productSkuDesp = null
				if (this.color && this.size) {
					productSkuDesp = `颜色:${this.color}尺码:${this.size}`;
				}
				if (this.color && !this.size) {
					productSkuDesp = `颜色:${this.color}`;
				}
				if (!this.color && this.size) {
					productSkuDesp = `尺码:${this.size}`;
				}
				if (!this.color && !this.size) {
					productSkuDesp = null;
				}
				
				var params = {
					agentSn: null,
					actId: this.actId,
					catId: this.categoryid,
					maxPrice: this.maxPrice ? this.maxPrice : null,
					minPrice: this.minPrice ? this.minPrice : null,
					productSkuDesp: productSkuDesp,
					sceneId: this.sceneid,
					params:this.paramslist,
					partitionId:this.partitionId,
					paramvalues:this.paramvalueslist,
					sort: this.sort,
					currentPage: this.paging.page,
					pageSize: 10
				};
				// console.log(this.paramslist?this.paramslist:null)
				if (this.actId) {
					console.log('aa')
					this.goodList = []
					goodList
						.getActList(params)
						.then(res => {
							this.paging.total = Math.ceil(res.data.total / res.data.size);
							this.goodList = res.data.records.map(v => {
								v.image = this.imgCDNUrl + v.goodsImg;
								return v;
							});
							console.log(params,this.goodList,res.data.records,res)
						})
						.catch(err => {
							console.log(new Error('请检查网络后重试'));
						});

				} else {
					console.log('bb')
					this.goodList = []
					goodList
						.getList(params)
						.then(res => {
							this.paging.total = Math.ceil(res.data.total / res.data.size);
							this.goodList = res.data.records.map(v => {
								v.image = this.imgCDNUrl + v.goodsImg;
								return v;
							});
						})
						.catch(err => {
							console.log(new Error('请检查网络后重试'));
						});
				}


			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			go_screen(e) {
				if (this.sort !== e) {
					this.sort = e;
					this.paging.page = 1,
						this.goodList = []
					this.getDate();
				}
			},
			go_screen_price() {
				if (this.sort === 3) {
					this.sort = 4;
					this.screen_price = !this.screen_price;
				} else if (this.sort === 4) {
					this.screen_price = !this.screen_price;
					this.sort = 3;
				} else {
					this.sort = 3;
				}
                   this.getDate();
			},
			prev() {
				if (this.paging.page > 1) {
					this.paging.page -= 1;
					this.getDate();
				}
			},
			next() {
				if (this.paging.page < this.paging.total) {
					this.paging.page += 1;
					this.getDate();
			
				}
			},
			
			//商品详情
			go_goodDetails(e) {
				this.commonality.route_balings('/pages/shop/commodity/particulars', ['shopId','actId','actType'], [e,this.actId,this.actType]);
				
				
				
				
				
				// if(this.actType==1){
				// 	this.commonality.route_balings('/pages/agent/placeorder/particulars', ['shopId','actId'], [e,this.actId]);
						
				// }else if(this.actType==2){
				// 	this.commonality.route_balings('/pages/shop/commodity/particulars', ['shopId','actId','actType'], [e,this.actId,this.actType]);
				// }else{
				// 	this.commonality.route_baling('/pages/shop/commodity/particulars', 'shopId',e);
				// }
			
			},
			go_url(url) {
				uni.navigateTo({
					url: url
				});
			}
		},
	

	};
</script>

<style lang="less" scoped>
	

	.draw {
		top: 78px;
		.button {
			margin: 80rpx 20rpx 20rpx;
			background: linear-gradient(80deg, #d2158a, #fc6395);
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 45rpx;
		}
	}

	.commoditylist {
		background: #fff;
		height: 100%;
		position: relative;
		// padding-top: var(--status-bar-height);
		box-sizing: border-box;
		.titless{
			margin: auto;
		}
		.headline {
			position: fixed;
			z-index: 9999;
			width: 100%;
			top: var(--status-bar-height);

			image {
				position: absolute;
				width: 19px;
				height: 19px;
				top: 2px;
				right: 20rpx;
				padding: 10px;
			}
		}

		.screen {
			position: fixed;
			width: 100%;
			top: 44px;
			margin-top: var(--status-bar-height);
			display: flex;
			box-shadow: 5rpx 0 20rpx rgba(191, 191, 191, 0.35);
			z-index: 9;
			background: #ffffff;

			view {
				flex: 1;
				margin: 0 30rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 30rpx;

				.price {
					width: 17rpx;
					height: 25rpx;
				}

				.positive {
					transform: rotate(180deg);
				}
			}

			view.active {
				border-bottom: 3rpx solid #bd3c8c;
				color: #bd3c8c;
			}

			.arrange {
				image {
					position: relative;
					width: 31rpx;
					height: 31rpx;
					top: 5rpx;
				}
			}

			.filtrate {
				position: relative;

				image {
					position: absolute;
					width: 37rpx;
					height: 37rpx;
					top: 30rpx;
				}
			}
		}

		.list {
			position: relative;
			z-index: 1;
			overflow-y: auto;
			padding: 95px 20rpx 0 20rpx;
			box-sizing: border-box;
			background: #fff;
		}

		.level {
			.shop {
				display: flex;
				border-bottom: 1rpx solid #e1e1e1;
				/*no*/
				padding: 20rpx 0;

				.img {
					image {
						width: 260rpx;
						height: 260rpx;
						border-radius: 20rpx;
					}
				}

				.msg {
					position: relative;
					padding-left: 29rpx;
					width: 100%;

					.name {
						font-size: 30rpx;
						line-height: 50rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.price {
						position: absolute;
						width: 100%;
						bottom: 0;
						right: 0;
						padding-left: 20rpx;
						box-sizing: border-box;
						color: #bd3c8c;
						font-size: 34rpx;

						.right {
							width: 44rpx;
							height: 44rpx;
							position: relative;
							right: 40rpx;
							top: -5rpx;
						}
					}
				}
			}
		}

		.vertical {
			.shop {
				width: 47%;
				float: left;
				overflow: hidden;
				box-shadow: 1rpx 2rpx 20rpx rgba(197, 197, 197, 0.35);
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.img {
					image {
						width: 100%;
						height: 50vw;
					}
				}

				.msg {
					.name {
						padding: 0 16rpx;
						height: 80rpx;
						font-size: 26rpx;
						margin-top: 20rpx;
						line-height: 40rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}

					.price {
						padding: 0 16rpx;
						font-size: 32rpx;
						color: #bd3c8c;
						line-height: 86rpx;

						.right {
							position: relative;
							width: 44rpx;
							height: 44rpx;
							float: right;
							top: 18rpx;
						}
					}
				}
			}

			.shop:nth-child(2n) {
				margin-left: 6%;
			}
		}
	}

	.classify {
		border-bottom: 1px solid #e1e1e1;

		.title {
			font-size: 28rpx;
			line-height: 110rpx;
			color: #999999;
		}

		.ul {
			overflow: hidden;
			padding: 0 4rpx;

			.li {
				float: left;
				width: 160rpx;
				height: 72rpx;
				line-height: 72rpx;
				margin-right: 26rpx;
				margin-bottom: 33rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
				background: #f4f4f4;
				color: #999;
				text-align: center;
				position: relative;

				.check {
					display: none;
				}

				&.on {
					background-color: #fbeef6;
					color: #bd3c8c;

					.check {
						display: block;
						position: absolute;
						bottom: -12rpx;
						right: 8rpx;
					}
				}
			}

			.li:nth-child(3n) {
				margin-right: 0;
			}

			.li {
				display: block;
			}
		}

		.xian {
			width: 53rpx;
			margin: 36rpx 30rpx 0 0;
			border-bottom: 1px solid #e1e1e1;
			display: inline-block;
			float: left;
		}

		.price {
			.ul {
				.li {
					width: 230rpx;
					margin-right: 0;
					color: #000000;
				}
			}
		}
	}
</style>
